<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<script>
//<![CDATA[
$(function () {
    var people = [
        { id: 1, text: 'John Cook' },
        { id: 2, text: 'Steve Jobs' },
        { id: 3, text: 'Peter Sanders' },
        { id: 4, text: 'Mark Newman' },
        { id: 5, text: 'Addy Osmani' },
        { id: 6, text: 'Paul Irish' },
        { id: 7, text: 'Doug Crocford' },
        { id: 8, text: 'Nicolas Cage' }
    ];

    $('#grid').w2grid({
        name    : 'grid',
        header    : 'List of Names',
        show: {
            toolbar: true,
            footer: true,
            header: true,
            emptyRecords: true,
            selectColumn: false,
            expandColumn: false,
            orderColumn: true,
            columnHeaders: true,
            lineNumbers: true,
            toolbarDelete: true,
            toolbarSave: true,
            toolbarAdd: true
        },
        reorderRows: true,
        onClick(event) {
            var tg = $(event.originalEvent.target);
            if (tg[0].tagName == 'DIV') tg = tg.parents('td');
            if (tg.hasClass('w2ui-col-select')) {
                console.log('clicked on select row checkbox');
            }
        },
        toolbar: {
            items: [
                { id: 'w2ui-add', type: 'button', text: 'CUSTOM add', icon: 'w2ui-icon-plus' },
                { id: 'w2ui-edit', type: 'button', text: 'CUSTOM edit', icon: 'w2ui-icon-plus' },
                { id: 'w2ui-addc', type: 'menu', text: 'CUSTOM2', icon: 'w2ui-icon-plus',
                    items: [
                        { id: '1', text: 'some 1' },
                        { id: '2', text: 'some 2', batch: 1 },
                        { id: '3', text: 'some 3', batch: 0 }
                    ]
                }
            ],
            onClick(event) {
                console.log('click', event.target)
            }
        },
        onSelect: function (event) {
            console.log('select', event)
        },
        onUnselect: function (event) {
            console.log('unselect', event)
        },
        // selectType: 'cell',
        columns: [
            { field: 'recid', text: function(col) { return (new Date()).getTime() }, size: '180px', sortable: true, searchable: 'int' },
            { field: 'int', text: 'int', size: '80px', sortable: true, resizable: true,
              editable: function (record, index, col_index, data) {
                  // only odd 'recid' records are editable
                  if (record.recid % 2) return { type: 'int', min: 0, max: 100 };
              } },
            { field: 'money', text: 'money', size: '80px', sortable: true, resizable: true, editable: { type: 'money' }, render: 'money' },
            { field: 'percent', text: 'percent', size: '80px', sortable: true, resizable: true, editable: { type: 'percent' }, render: 'percent' },
            { field: 'hex', text: 'hex', size: '80px', sortable: true, resizable: true, editable: { type: 'hex' } },
            { field: 'color', text: 'color', size: '80px', sortable: true, resizable: true, editable: { type: 'color' } },
            { field: 'date', text: 'date', size: '80px', sortable: true, resizable: true, editable: { type: 'date' } },
            { field: 'time', text: 'time', size: '80px', sortable: true, resizable: true, editable: { type: 'time' } },
            { field: 'list', text: 'list', size: '50%', sortable: true, resizable: true,
                editable: { type: 'list', align: 'left', items: people }
            },
            { field: 'combo', text: 'combo1', size: '50%', sortable: true, resizable: true, editable: { align: 'left', type: 'combo', items: people } },
            { field: 'select', text: 'select', size: '100px', sortable: true, resizable: true,
                editable: { type: 'select', items: people },
                render: function (record, index, col_index) {
                    var html = '';
                    for (var p in people) {
                        if (people[p].id == this.getCellValue(index, col_index)) html = people[p].text;
                    }
                    return html;
                }
            },
            { field: 'check', text: 'check', size: '70px', sortable: true, resizable: true,
                editable: function (record, index, col_index, data) {
                  // only odd 'recid' records are editable
                  if (record.recid % 2) return { type: 'checkbox' }
               } },
            { field: 'enum', text: 'enum', size: '380px', sortable: true, resizable: true, editable: { type: 'enum', items: people } },
            { field: 'file', text: 'file', size: '80px', sortable: true, resizable: true, editable: { type: 'file' } },
            // { field: 'radio', text: 'radio', size: '80px', sortable: true, resizable: true, editable: { type: 'radio' } },
        ]
    });
    var fname = ['Vitali', 'Katsia', 'John', 'Peter', 'Sue', 'Olivia', 'Thomas', 'Sergei', 'Snehal', 'Avinash', 'Divia'];
    var lname = ['Peterson', 'Rene', 'Johnson', 'Cuban', 'Twist', 'Sidorov', 'Vasiliev', 'Yadav', 'Vaishnav'];
    // add 10k records
    for (var i = 0; i < 150; i++) {
        w2ui['grid'].records.push({
            recid : (i + 10),
            list1 : { id: 1, text: 'some' },
            int: 4,
            float: 5,
            money: 6,
            check: Math.random() > 0.9 ? true : false,
            select: 2
        });
    }
    w2ui.grid.records[0].editable = false;
    w2ui.grid.records[1].editable = false;
    w2ui.grid.records[2].editable = false;
    w2ui.grid.total = w2ui.grid.records.length;
    w2ui.grid.buffered = w2ui.grid.records.length;
    w2ui.grid.refresh();
});
//]]>
</script>
</head>
<body>
    <input placeholder="before" style="margin-bottom: 5px;"/>
    <div id="grid" style="width: 1024px; height: 568px;"></div>
    <input placeholder="after" style="margin-top: 5px;"/>
</body>
</html>
